/**
 *@auther: tang
 @Date: 2020-11-12
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import {Table,Popconfirm, Button, Modal, Tooltip, message} from 'antd';
import Req from "../../../api"
import "./adminsTable.css"
import * as Icon from "@ant-design/icons"
import GivePermiss from "./adminsTable/GivePermiss";
import ViewAdmLog from "./adminsTable/ViewAdmLog";
import { Observer,inject} from "mobx-react"
import UpdateAdmInfo from "./adminsTable/UpdateAdmInfo";
const { Column} = Table;

@inject("userStore","permissStore")
@Observer
class AdminsTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            confirmLoading:false,
            modalText:"aaaaaa",
            modalOpt:{
                id:1,
                title:"分配权限",
                adm_id:""
            },
            admLog:{},
            logIsLoading:true
        }

    }
    showModal = () => {
        this.setState({
            visible:true
        })
    };

    handleOk = () => {
        this.setState({
            confirmLoading:true
        })
        //发起修改请求
        if (this.state.modalOpt.id===1){
            //分配权限的提交
            Req.allotAdm({id:this.state.modalOpt.adm_id,permission:this.props.permissStore.permissCheckData}).then(res=>{
                console.log(res);
                this.setState({
                    visible:false,
                    confirmLoading:false
                },()=>{
                    Modal.success({
                        title:"权限分配完成"
                    })
                })
            }).catch(err=>{
                console.log(err)
            })
        }else if (this.state.modalOpt.id===4){
        //    删除管理员的提交
            Req.delAdm({id:this.state.modalOpt.adm_id}).then(res=>{
                console.log(res);
                this.setState({
                    visible:false,
                    confirmLoading:false
                },()=>{
                    message.success("删除成功");
                })
            }).catch(err=>{
                console.log(err);
                message.error("服务器开小差了")
            })
        }

    };
    closeModal(){
        // console.log(this)
        this.setState({
            visible:false
        })
    }
    handleCancel = () => {
        this.setState({
            visible:false
        })
    };
    componentDidMount() {

    }
    //点击不同的按钮触发不同的模态框
    givePermission(opt,e){
    //    操作处理函数
         e.preventDefault();
         console.log(opt)
        switch (opt.id) {
            case 2:
                this.setState({
                    logIsLoading:true
                })
                Req.getAdmLog({id:this.state.modalOpt.adm_id}).then((res=>{
                    console.log(res)
                    this.setState({
                        admLog:res.admLog,
                        logIsLoading:false
                    })
                })).catch((err)=>{
                    message.error("服务器出错了",err)
                    this.setState({
                        logIsLoading:false
                    })
                })
                this.setState({
                    modalOpt:{
                        id:opt.id,
                        title:opt.title,
                        adm_id:opt.adm_id
                    }
                })
                this.showModal();
                break;
            case 3:
                this.setState({
                    modalOpt:{
                        id:opt.id,
                        title:opt.title,
                        adm_id:opt.adm_id
                    }
                })
                this.showModal();
                break;
            case 4:
                this.showModal();
                this.setState({
                    modalOpt:{
                        id:opt.id,
                        title:opt.title,
                        adm_id:opt.adm_id
                    }
                })
                break;
            default :
                this.setState({
                    modalOpt:{
                        id:opt.id,
                        title:opt.title,
                        adm_id:opt.adm_id
                    }
                })
                this.showModal();
                break;
        }

    }
    onPageChange( page,limit){
        this.props.getTableData(page,limit)
    }
    render() {
        let {state} = this;
        // console.log(this.props.tableData)
        return (
            <div>
                <Table dataSource={this.props.tableData} loading={{
                    tip:"数据请求中",
                    spinning:this.props.dataIsLoading
                }} sticky={true} pagination={{
                    defaultCurrent:1,total:this.props.tableData.length,onChange:this.onPageChange.bind(this)
                }}>
                    <Column title="用户名" dataIndex="adm_username" key="key" />
                    <Column title="创建时间" dataIndex="adm_create" key="key" />
                    <Column title="最后登录时间" dataIndex="adm_logindate" key="key" />
                    <Column title="操作" dataIndex="adm_action" key="key" render ={ (text,record,index)=>{
                        return <div className="tableAction">
                            <Tooltip title="分配权限">
                                <Button shape="circle" icon={<Icon.SwitcherTwoTone />} onClick={this.givePermission.bind(this,{id:1,title:"分配权限",adm_id:record.adm_id})}/>
                            </Tooltip>
                            <Tooltip title="查看日志">
                                <Button shape="circle" icon={<Icon.EyeTwoTone />} onClick={this.givePermission.bind(this,{id:2,title:"查看日志",adm_id:record.adm_id})}/>
                            </Tooltip>
                            <Tooltip title="修改">
                                <Button shape="circle"  icon={<Icon.EditTwoTone  />} onClick={this.givePermission.bind(this,{id:3,title:"修改",adm_id:record.adm_id})}/>
                            </Tooltip>
                            <Tooltip title="删除">
                            <Button shape="circle" icon={<Icon.DeleteTwoTone />} onClick={this.givePermission.bind(this,{id:4,title:"删除",adm_id:record.adm_id})}/>
                        </Tooltip>
                        </div>
                    }}/>
                </Table>
                <Modal
                    title={this.state.modalOpt.title}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    confirmLoading={this.state.confirmLoading}
                    onCancel={this.handleCancel}
                    maskClosable={false}
                    width={1000}
                    cancelText="取消"
                    centered
                    okText="提交"
                    destroyOnClose={true}
                    footer={state.modalOpt.id===2||state.modalOpt.id===3?null:undefined}
                >

                    {state.modalOpt.id===1?<GivePermiss adm_id={state.modalOpt.adm_id}/>:(state.modalOpt.id===2?<ViewAdmLog logIsLoading={this.state.logIsLoading} admLog={state.admLog}  adm_id={state.modalOpt.adm_id}/>:(state.modalOpt.id===3?<UpdateAdmInfo closeModal={this.closeModal.bind(this)} initInfo={this.props.tableData.find(item=>{
                        return item.adm_id===this.state.modalOpt.adm_id
                    })}/>:<h2>确定要删除名为{(this.props.tableData.find(item=>{return item.adm_id===this.state.modalOpt.adm_id})).adm_username}的管理员吗？</h2>))}
                </Modal>
            </div>

        )
    }
}

export {AdminsTable as default}
